<template>
    <el-row :gutter="12">
        <article v-for="(item,i) in archive">
            <p>{{item.month}} 月</p>
            <el-col :span="24">
                <el-card shadow="hover" v-for="(info) in item.monthList">
                    <span class="time">{{info.time}}</span>
                    <span class="title">{{info.title}}</span>
                </el-card>
            </el-col>
        </article>
    </el-row>
</template>

<script>
    import Header from "./Header";
    export default {
        name: "BlogArchive",
        components: {Header},
        data() {
            return {
                activeName: '1',
                archive:[
                    {
                        month: "1",
                        monthList:[
                            {
                                title:'学习 Node.js 运行时——迷失在 npm 包的海洋之际',
                                time: '2020-2-2',
                            },
                            {
                                title:'深入 ES6 面向对象',
                                time: '2020-12-2',
                            },
                            {
                                title:'利用 Prometheus 监控 NodeJS 应用',
                                time: '2020-10-2',
                            }
                        ]
                    },
                    {
                        month: "2",
                        monthList:[
                            {
                                title:'学习 Node.js 运行时——迷失在 npm 包的海洋之际',
                                time: '2020-2-2',
                            }
                        ]
                    },
                    {
                        month: "3",
                        monthList:[
                            {
                                title:'学习 Node.js 运行时——迷失在 npm 包的海洋之际',
                                time: '2020-2-2',
                            }
                        ]
                    },
                    {
                        month: "4",
                        monthList:[
                            {
                                title:'学习 Node.js 运行时——迷失在 npm 包的海洋之际',
                                time: '2020-2-2',
                            }
                        ]
                    }
                ]
            };
        }
    }
</script>
<style scoped>
    article p{
        margin-bottom: 10px;
        font-size: 30px;
        text-align: center;
    }
    header {
        display: block;
        height: 50px;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
    }
    .el-col{
        margin-bottom: 50px;
    }
    .el-card {
        margin: 10px 100px;
    }
    span {
        font-size: 18px;
        padding-right: 60px;
    }

</style>